<template>
    <div class="page">
        <header class="navbar">
            <div>
                <img class="logo-img" src="@/assets/logo.svg" alt=""/>
                <span classs="site-anme">MtserverDoctor</span>
            </div>
            <nav class="navs">
                <router-link class="link" to="/home" style="margin-right: 30px;" :underline="false">首页</router-link>
                <router-link class="link" to="/ciphertool" style="margin-right: 30px;" :underline="false">加解密工具</router-link>
                <router-link class="link" to="/about" :underline="false">关于</router-link>
            </nav>
        </header>
        <div class="wrapper">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
</script>
<style scoped lang="scss">
.page {
    height: 100%;
}
.page header.navbar {
    height: 64px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    z-index: 99;
    background-color: var(--background-color);
}
.logo-img {
    width: 26px;
    vertical-align: middle;
    margin-right: 10px;
}
.navs {
    display: flex;
    .link {
        color: var(--text-color);
        text-decoration: none;
        &:hover {
            color: var(--primary-color);
        }
    }
}
.wrapper {
    height: calc(100%);
    padding-top: 65px;
}
</style>